<template>
    <div class="parentList" style="width: calc(100%);height: calc(100%);left: calc(0%);top:calc(0%)">
        <div class="content-menu" draggable="false" 
        :class="{empty: view.isEmpty}" ref="contentMenu" v-for="(view, $index) in viewList" 
        :data-uid="view.uid" 
        :style="{width: view.creatWidth,height: view.creatHeight,left: view.creatLeft,top:view.creatTop,background: view.bgColor}">
            <template v-if="!view.isEmpty">
                <div class="content-popup" data-edit="view" @click="clickViewActive($index)" @dblclick="loginKPITree($index)" draggable="false" 
                @dragleave="dragLeave()" @dragover.stop.prevent="dragOver($event, $index)" :data-id="$index" data-empty="false" @drop.self="dragDrop($event, $index)" 
                style="width: calc(100%);height: calc(100%);left: calc(0%);top:calc(0%)"></div>
                <div class="delete" v-show="view.isActive" @click="deleteViewListItem($index)"></div>
                <div class="draglogo" v-show="view.isActive" draggable="true" @dragstart="dragStart($event, $index)"></div>
                <div class="leftLine" v-show="view.isActive" data-dir="left" style="left: 0px;"></div>
                <div class="rightLine" v-show="view.isActive" data-dir="right" style="right: 0px;"></div>
                <div class="topLine" v-show="view.isActive" data-dir="top" style="top: 0px;"></div>
                <div class="bottomLine" v-show="view.isActive" data-dir="bottom" style="bottom: 0px;"></div>
                <!-- <div class="header">{{view.text}}</div> -->
                  <!-- <div v-if="view.type == 'custom'" class="list-content" :id="view.uid" :data-source="view.dataSource">
                    {{view.text}}
                     <div id="" data-qlik-app-id="" data-qlik-obj-id="" style="width: calc(100% - 4px); height: calc(100% - 4px);">{{view.text}}</div> -->
                  <!-- </div> -->
                <div class="list-content" :id="view.id" :data-uid="view.uid">
                     <i class="iconfont icons-loading loading"></i>
                    <!-- <div id="" data-qlik-app-id="" data-qlik-obj-id="" style="width: calc(100% - 4px); height: calc(100% - 4px);">{{view.text}}</div> -->
                    <!-- <iframe :id="view.uid" :src="view.src" frameborder="0" width="100%" height="100%"></iframe> -->
                  </div>
                
            </template>
            <template v-else-if="view.isEmpty">
                <!-- {{view.isEmpty}} -->
                <div class="content-popup isEmpty" 
                @click="clickViewActive($index)" :class="{active: borderActive}" 
                draggable="false" @dragleave="dragLeave()"
                @dragover.stop.prevent="dragOver($event, $index)" 
                :data-id="$index" @drop="dragDrop($event, $index)" data-empty="true" 
                style="width: calc(100%);height: calc(100%);left: calc(0%);top:calc(0%)"></div>
                <div class="delete" v-show="view.isActive" @click="deleteViewListItem($index)" @dblclick="loginKPITree($index)"></div>
                <div class="draglogo" v-show="view.isActive" draggable="true" @dragstart="dragStart($event, $index)"></div>
                <div class="leftLine" v-show="view.isActive" data-dir="left" style="left: 0px;"></div>
                <div class="rightLine" v-show="view.isActive" data-dir="right" style="right: 0px;"></div>
                <div class="topLine" v-show="view.isActive" data-dir="top" style="top: 0px;"></div>
                <div class="bottomLine" v-show="view.isActive" data-dir="bottom" style="bottom: 0px;"></div>
            <div class="list-content" :id="view.id" :data-uid="view.uid"></div>
            </template>

        </div>
        <div class='mask' v-if='maskShow' v-bind:style='{width: maskStyle.maskWidth, height: maskStyle.maskHeight, top: maskStyle.maskTop, left: maskStyle.maskLeft}'></div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import $ajax from "../../service/ajax";
import global from "../../config/global";
import echarts from "echarts";

export default {
  props: [],
  data() {
    return {
      api: global.api,
      dragDir: "",
      maskShow: false,
      dropTargetStyle: {
        dropTargetWidth: 0,
        dropTargetHeight: 0,
        dropTargetLeft: 0,
        dropTargetTop: 0
      },
      myCharts: null,
      dragViewListIndex: Number,
      obj: {},
      echartsOption: {}, //echarts实例配置项
      echartsObj: []  //存放echarts实例对象数组
    };
  },
  methods: {
    loginKPITree($index) {
      this.$router.push("./kpi");
      this.$store.commit("changeKpiIndex", $index);
    },
    clickViewActive: function($index) {
      let store = this.$store;
      store.commit("changeClickIsActive", $index);
      let id = this.viewList[$index].uid;
      
      store.commit("changeEditIndexId", id);

      // let str = event.target.dataset.edit;
      // let type = this.viewList[$index].type;
      // if (type == "custom") {
      //   this.$store.commit("changeEditControlType", str);
      //   this.$store.commit("changeShowControl", true);
      // } else {
      //   this.$store.commit("changeShowControl", false);
      // }
    },

    dragStart: function(event, $index) {
      this.$store.commit("changeEmptyActive", true);

      this.dragViewListIndex = $index;

      this.$store.commit("changeBorderActive", true);

      let sourceObj = JSON.stringify({ sourceText: "dragViewItem" });

      event.dataTransfer.setData("source", sourceObj);
      console.log(event.dataTransfer.getData("source"));
    },
    dragLeave: function() {
      this.maskShow = false;
    },
    dragEnter: function(event) {
      this.$store.commit("changeMaskShow", true);

      this.$store.commit("changeShowState", false);
      this.showState2 = true;
    },
    dragOver: function(event, $index) {
      let _this = this;
      let $store = _this.$store.state;

      _this.maskShow = true;

      let views = _this.viewList[$index];
      let target = event.target;
      let x = event.offsetX;
      let y = event.offsetY;
      let partten = /\((.*?)%/;

      // 拖放目标元素的属性值
      let targetLeft = parseFloat(partten.exec(views.creatLeft)[1]);
      let targetTop = parseFloat(partten.exec(views.creatTop)[1]);
      let targetWidth = parseFloat(partten.exec(views.creatWidth)[1]);
      let targetHeight = parseFloat(partten.exec(views.creatHeight)[1]);

      let width = parseFloat(target.offsetWidth / 3);
      let height = parseFloat(target.offsetHeight / 3);
      // console.log('width' + width + 'height' + height);
      // mask层的属性值
      let iMaskWidth = 0;
      let iMaskHeight = 0;
      let iMaskTop = 0;
      let iMaskLeft = 0;
      if (x > 0 && x < width && y > 0 && y < height) {
        // 左上 在左邊生成div
        // console.log('左上=================')
        _this.dragDir = "left";
        if (targetWidth <= _this.calcX) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth / 2;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft + targetWidth / 2;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        }
      } else if (x > 0 && x < width && y < height * 2 && y > height) {
        // 左中 在左邊生成div
        _this.dragDir = "left";
        if (targetWidth <= _this.calcX) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth / 2;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft + targetWidth / 2;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        }
      } else if (x > 0 && x < width && y < height * 3 && y > height * 2) {
        // 左下 在左邊生成div
        _this.dragDir = "left";
        if (targetWidth <= _this.calcX) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth / 2;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft + targetWidth / 2;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        }
      } else if (x > width && x < width * 2 && y > 0 && y < height) {
        // 上中 div在上邊
        _this.dragDir = "top";
        // console.log('上中=================')
        if (targetHeight <= _this.calcY) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight / 2;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop + targetHeight / 2;
        }
      } else if (
        x > width &&
        x < width * 2 &&
        y > height * 2 &&
        y < height * 3
      ) {
        // 下中 div在下邊
        _this.dragDir = "bottom";
        // console.log('下中=================')
        if (targetHeight <= _this.calcY) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop + targetHeight / 2;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight / 2;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        }
      } else if (x > width * 2 && x < width * 3 && y > 0 && y < height) {
        // 右上 div在右邊
        _this.dragDir = "right";
        // console.log('右上=================');
        if (_this.targetWidth <= _this.calcX) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft + targetWidth / 2;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth / 2;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        }
      } else if (
        x > width * 2 &&
        x < width * 3 &&
        y > height &&
        y < height * 2
      ) {
        // 右中 div在右邊
        _this.dragDir = "right";
        // console.log('右中=================')
        if (targetWidth <= _this.calcX) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft + targetWidth / 2;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth / 2;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        }
      } else if (
        x > width * 2 &&
        x < width * 3 &&
        y > height * 2 &&
        y < height * 3
      ) {
        // 右下 div在右邊
        _this.dragDir = "right";
        // console.log('右下=================')
        if (targetWidth <= _this.calcX) {
          iMaskLeft = targetLeft;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        } else {
          iMaskLeft = targetLeft + targetWidth / 2;
          iMaskTop = targetTop;
          iMaskWidth = targetWidth / 2;
          iMaskHeight = targetHeight;
          _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
          _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
          _this.dropTargetStyle.dropTargetLeft = targetLeft;
          _this.dropTargetStyle.dropTargetTop = targetTop;
        }
      } else if (x > width && x < width * 2 && y > height && y < height * 2) {
        // 中間 div跟target一樣大小
        _this.dragDir = "middle";
        iMaskLeft = targetLeft;
        iMaskTop = targetTop;
        iMaskWidth = targetWidth;
        iMaskHeight = targetHeight;
        _this.dropTargetStyle.dropTargetWidth = iMaskWidth;
        _this.dropTargetStyle.dropTargetHeight = iMaskHeight;
        _this.dropTargetStyle.dropTargetLeft = targetLeft;
        _this.dropTargetStyle.dropTargetTop = targetTop;
      }
      // _this.creatMask.classList.add('active');
      _this.maskStyle.maskLeft = "calc(" + iMaskLeft + "% + 2px)";
      _this.maskStyle.maskTop = "calc(" + iMaskTop + "% + 2px)";
      _this.maskStyle.maskWidth = "calc(" + iMaskWidth + "% - 4px)";
      _this.maskStyle.maskHeight = "calc(" + iMaskHeight + "% - 4px)";
    },
    dragDrop: function(event, $index) {
      let _this = this;
      let _targetCreat = _this.viewList[$index];
      let _source = JSON.parse(event.dataTransfer.getData("source"));

      let text = _source.sourceText;

      _this.maskShow = false;

      // 图形与图形之间的拖拽
      // 只需要改变当前图形和目标图形的位置信息，不需要添加空白图形
      let dragStartView = _this.viewList[_this.dragViewListIndex];
      let blankObj = {
        id: global.uid(),
        appId: null,
        uid: global.uid(),
        creatWidth: dragStartView.creatWidth,
        creatHeight: dragStartView.creatHeight,
        creatTop: dragStartView.creatTop,
        creatLeft: dragStartView.creatLeft,
        text: "dragViewItem",
        isEmpty: true,
        isActive: false
      };

      // 判断一下是不是对自己进行拖放？？？
      if (_this.dragViewListIndex == $index) {
        if (_this.dragDir !== "middle") {
          blankObj = {
            id: global.uid(),
            appId: null,
            productId: null,
            uid: global.uid(),
            creatWidth:
              "calc(" + _this.dropTargetStyle.dropTargetWidth + "% - 4px)",
            creatHeight:
              "calc(" + _this.dropTargetStyle.dropTargetHeight + "% - 4px)",
            creatTop:
              "calc(" + _this.dropTargetStyle.dropTargetTop + "% + 2px)",
            creatLeft:
              "calc(" + _this.dropTargetStyle.dropTargetLeft + "% + 2px)",
            text: "dragViewItem",
            isEmpty: true,
            isActive: false,
            option: null
          };

          _this.$store.commit("addViewList", blankObj);

          dragStartView.creatHeight = _this.maskStyle.maskHeight;
          dragStartView.creatWidth = _this.maskStyle.maskWidth;
          dragStartView.creatTop = _this.maskStyle.maskTop;
          dragStartView.creatLeft = _this.maskStyle.maskLeft;
        }
      } else {
        if (_this.dragDir == "middle") {
          //   分为两种情况，1，目标是空图形，目标不是空图形

          if (_targetCreat.isEmpty) {
            // 如果为空 则直接替换 在原来的位置生成空元素

            _this.$store.commit("addViewList", blankObj);
            _this.$store.commit("removeViewList", $index);
          } else {
            // 如果不为空

            let confirm = window.confirm("确定要覆盖当前控件吗？");

            if (!confirm) return;

            _this.$store.commit("addViewList", blankObj);

            _this.$store.commit("removeViewList", $index);
          }
        } else {
          _this.$store.commit("addViewList", blankObj);
        }

        dragStartView.creatHeight = _this.maskStyle.maskHeight;
        dragStartView.creatWidth = _this.maskStyle.maskWidth;
        dragStartView.creatTop = _this.maskStyle.maskTop;
        dragStartView.creatLeft = _this.maskStyle.maskLeft;

        _targetCreat.creatHeight =
          "calc(" + _this.dropTargetStyle.dropTargetHeight + "% - 4px)";
        _targetCreat.creatWidth =
          "calc(" + _this.dropTargetStyle.dropTargetWidth + "% - 4px)";
        _targetCreat.creatTop =
          "calc(" + _this.dropTargetStyle.dropTargetTop + "% + 2px)";
        _targetCreat.creatLeft =
          "calc(" + _this.dropTargetStyle.dropTargetLeft + "% + 2px)";
      }

      _this.$store.commit("changeBorderActive", false);

      _this.$store.commit("changeEmptyActive", false);

      return false;
    },
    parseURL: function(url) {
      var a = document.createElement("a");
      a.href = url;
      return {
        source: url,
        protocol: a.protocol.replace(":", ""),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function() {
          var ret = {},
            seg = a.search.replace(/^\?/, "").split("&"),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split("=");
            ret[s[0]] = s[1];
          }
          return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ""])[1],
        hash: a.hash.replace("#", ""),
        path: a.pathname.replace(/^([^\/])/, "/$1"),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ""])[1],
        segments: a.pathname.replace(/^\//, "").split("/")
      };
    },
    dragEnd: function() {
      return false;
    },
    deleteMinBox: function() {},
    moveLineChangeBox: function(event, dir, $index) {
      let _this = this;

      let partten = /\((.*?)\%/;

      let initX = 0,
        initY = 0,
        calcX = 0,
        calcY = 0,
        moveCalc = 0;

      let e = event || window.event;
      let ele = e.target;
      let x = parseFloat(e.pageX),
        y = parseFloat(e.pageY);
      let changeViewList = _this.viewList[$index];

      let isStopList = [];

      let width = 0,
        height = 0;

      let sourceLeft = parseFloat(partten.exec(changeViewList.creatLeft)[1]),
        sourceTop = parseFloat(partten.exec(changeViewList.creatTop)[1]),
        sourceWidth = parseFloat(partten.exec(changeViewList.creatWidth)[1]),
        sourceHeight = parseFloat(partten.exec(changeViewList.creatHeight)[1]);

      let sourceParentWidth = document.querySelector(".parentList").offsetWidth,
        sourceParentHeight = document.querySelector(".parentList").offsetHeight,
        parents = event.target.parentNode,
        parentsWidth = event.target.parentNode.offsetWidth,
        parentsLeft = event.target.parentNode.offsetLeft;

      // 获取一下非空组件，循环判断有没有上下左右四个方向有相邻的元素或者等于0的就不能拖动
      let stopList = _this.viewList.filter(item => item.isEmpty !== true);
      let FitState = "";
      let currentObj = {}; //存储最近的那个对象
      let maxNum = 0,
        minNum = 100;

      // 在move之前判断一下上下左右有没有内容
      if (stopList.length != 0) {
        for (var i = 0; i < stopList.length; i++) {
          let stopListLeft = _this.regExpStyle(stopList[i].creatLeft);
          let stopListTop = _this.regExpStyle(stopList[i].creatTop);
          let stopListWidth = _this.regExpStyle(stopList[i].creatWidth);
          let stopListHeight = _this.regExpStyle(stopList[i].creatHeight);

          if (stopList[i] != changeViewList) {
            if (ele.classList.contains("leftLine")) {
              // 如果左侧等于右侧，并且sourceTop > 当前的top+height 或者当前的 top > sourceTop+sourceHeight
              if (sourceLeft == stopListLeft + stopListWidth) {
                if (
                  sourceTop < stopListTop + stopListHeight &&
                  stopListTop < sourceTop + sourceHeight
                ) {
                  // console.log('左边有贴合');
                  FitState = "left";
                  currentObj = {};
                }

                // 判断得到左边最近的元素，在拖动到左边元素时就停止拖拽
              } else if (sourceLeft > stopListLeft + stopListWidth) {
                if (
                  sourceTop < stopListTop + stopListHeight &&
                  stopListTop < sourceTop + sourceHeight
                ) {
                  if (stopListWidth + stopListLeft >= maxNum) {
                    FitState = "";
                    maxNum = stopListWidth + stopListLeft;

                    currentObj.currentObj = true;
                    currentObj.creatLeft = stopListLeft;
                    currentObj.creatTop = stopListTop;
                    currentObj.creatHeight = stopListHeight;
                    currentObj.creatWidth = stopListWidth;
                  }
                }
              }
            } else if (ele.classList.contains("topLine")) {
              if (sourceTop == stopListTop + stopListHeight) {
                if (
                  sourceLeft < stopListLeft + stopListWidth &&
                  stopListLeft < sourceLeft + sourceWidth
                ) {
                  FitState = "top";
                  currentObj = {};
                }

                // 判断得到左边最近的元素，在拖动到左边元素时就停止拖拽
              } else if (sourceTop > stopListTop + stopListHeight) {
                if (
                  sourceLeft < stopListLeft + stopListWidth &&
                  stopListLeft < sourceLeft + sourceWidth
                ) {
                  if (stopListTop + stopListHeight >= maxNum) {
                    FitState = "";
                    maxNum = stopListTop + stopListHeight;
                    currentObj.currentObj = true;
                    currentObj.creatLeft = stopListLeft;
                    currentObj.creatTop = stopListTop;
                    currentObj.creatHeight = stopListHeight;
                    currentObj.creatWidth = stopListWidth;
                  }
                }
              }
            } else if (ele.classList.contains("rightLine")) {
              if (sourceLeft + sourceWidth == stopListLeft) {
                if (
                  sourceTop < stopListTop + stopListHeight &&
                  stopListTop < sourceTop + sourceHeight
                ) {
                  // console.log('右边有贴合');
                  FitState = "right";
                  currentObj = {};
                }

                // 判断得到右边最近的元素，在拖动到右边元素时就停止拖拽
              } else if (sourceLeft + sourceWidth < stopListLeft) {
                if (
                  sourceTop < stopListTop + stopListHeight &&
                  stopListTop < sourceTop + sourceHeight
                ) {
                  if (stopListLeft < minNum) {
                    FitState = "";
                    minNum = stopListLeft;

                    currentObj.currentObj = true;
                    currentObj.creatLeft = stopListLeft;
                    currentObj.creatTop = stopListTop;
                    currentObj.creatHeight = stopListHeight;
                    currentObj.creatWidth = stopListWidth;
                  }
                }
              }
            } else if (ele.classList.contains("bottomLine")) {
              if (sourceTop + sourceHeight == stopListTop) {
                if (
                  sourceLeft < stopListLeft + stopListWidth &&
                  stopListLeft < sourceLeft + sourceWidth
                ) {
                  // console.log('下边有贴合');
                  FitState = "bottom";
                  currentObj = {};
                }

                // 判断得到右边最近的元素，在拖动到右边元素时就停止拖拽
              } else if (sourceTop + sourceHeight < stopListTop) {
                if (
                  sourceLeft < stopListLeft + stopListWidth &&
                  stopListLeft < sourceLeft + sourceWidth
                ) {
                  if (stopListTop < minNum) {
                    FitState = "";
                    minNum = stopListTop;
                    // currentObj = stopList[i];
                    currentObj.currentObj = true;
                    currentObj.creatLeft = stopListLeft;
                    currentObj.creatTop = stopListTop;
                    currentObj.creatHeight = stopListHeight;
                    currentObj.creatWidth = stopListWidth;
                  }
                }
              }
            }
          }
        }
      }

      document.onmousemove = function(ev) {
        var ev = ev || window.event;

        let nowX = parseFloat(ev.pageX);
        let nowY = parseFloat(ev.pageY);

        initX = nowX - x + moveCalc;
        initY = nowY - y + moveCalc;
        calcX = Number((initX / sourceParentWidth).toFixed(3)) * 100;
        calcY = Number((initY / sourceParentHeight).toFixed(3)) * 100;

        let viewListEach = _this.viewList;

        if (ele.classList.contains("leftLine")) {
          if (initX < 0) {
            // 如果左侧有贴合的块就停止拖拽
            if (FitState == "left") {
              document.onmousemove = null;
              document.onmouseup = null;
              return;
            }
            if (JSON.stringify(currentObj) != "{}") {
              // 左侧有参照对象就按照参照对象来确定当前所拉伸的范围
              if (
                sourceLeft + parseFloat(calcX) <=
                currentObj.creatLeft + currentObj.creatWidth
              ) {
                sourceWidth =
                  sourceWidth +
                  (sourceLeft - (currentObj.creatLeft + currentObj.creatWidth));
                sourceLeft = currentObj.creatLeft + currentObj.creatWidth;
                calcX = 0;
                document.onmousemove = null;
              }
            } else if (sourceLeft + parseFloat(calcX) <= 0) {
              sourceWidth = sourceWidth + sourceLeft;
              sourceLeft = 0;
              calcX = 0;
              document.onmousemove = null;
            } else if (sourceLeft == 0) {
              //判断左侧为0不能拖动
              document.onmousemove = null;
              document.onmouseup = null;
              return;
            }
          }
          ele.style.left = initX + "px";
        } else if (ele.classList.contains("rightLine")) {
          // 如果是右边的线
          // 并且是向右外边拉伸
          // 先判断当前拖动的距离加上这个盒子的左侧是不是大于父盒子的宽度
          if (initX > 0) {
            if (FitState == "right") {
              document.onmousemove = null;
              document.onmouseup = null;
              return;
            }
            if (JSON.stringify(currentObj) != "{}") {
              // 右侧有参照对象就按照参照对象来确定当前所拉伸的范围

              if (
                sourceLeft + sourceWidth + parseFloat(calcX) >=
                currentObj.creatLeft
              ) {
                sourceWidth =
                  sourceWidth +
                  (currentObj.creatLeft - (sourceLeft + sourceWidth));
                sourceLeft = sourceLeft + sourceWidth;
                calcX = 0;
                document.onmousemove = null;
              }
            } else if (sourceWidth + sourceLeft + parseFloat(calcX) >= 100) {
              sourceWidth = 100 - sourceLeft;
              calcX = 0;
              document.onmousemove = null;
            }
          } else if (initX < 0) {
          }
          ele.style.right = -initX + "px";
        } else if (ele.classList.contains("topLine")) {
          if (initY < 0) {
            if (FitState == "top") {
              document.onmousemove = null;
              document.onmouseup = null;
              return;
            }
            if (JSON.stringify(currentObj) != "{}") {
              // 左侧有参照对象就按照参照对象来确定当前所拉伸的范围
              if (
                sourceTop + parseFloat(calcY) <=
                currentObj.creatTop + currentObj.creatHeight
              ) {
                sourceHeight =
                  sourceHeight +
                  (sourceTop - (currentObj.creatTop + currentObj.creatHeight));
                sourceTop = currentObj.creatTop + currentObj.creatHeight;
                calcY = 0;
                document.onmousemove = null;
              }
            } else if (sourceTop + parseFloat(calcY) <= 0) {
              sourceHeight = sourceHeight + sourceTop;
              sourceTop = 0;
              calcY = 0;
              document.onmousemove = null;
            } else if (sourceTop == 0) {
              document.onmousemove = null;
              document.onmouseup = null;
            }
          }
          ele.style.top = initY + "px";
        } else if (ele.classList.contains("bottomLine")) {
          if (initY > 0) {
            if (FitState == "bottom") {
              document.onmousemove = null;
              document.onmouseup = null;
              return;
            }
            if (JSON.stringify(currentObj) != "{}") {
              // 下边侧有参照对象就按照参照对象来确定当前所拉伸的范围

              if (
                sourceTop + sourceHeight + parseFloat(calcY) >=
                currentObj.creatTop
              ) {
                sourceHeight =
                  sourceHeight +
                  (currentObj.creatTop - (sourceTop + sourceHeight));
                sourceTop = sourceTop + sourceHeight;
                calcY = 0;
                document.onmousemove = null;
              }
            } else if (sourceHeight + sourceTop + parseFloat(calcY) >= 100) {
              sourceHeight = 100 - sourceTop;
              calcY = 0;
              document.onmousemove = null;
            }
          }
          ele.style.bottom = -initY + "px";
        }
      };
      document.onmouseup = function() {
        if (ele.classList.contains("leftLine")) {
          // 判断是否有重合的部分
          _this.viewList[$index].creatLeft =
            "calc(" + (sourceLeft + parseFloat(calcX)) + "% + 2px)";
          _this.viewList[$index].creatWidth =
            "calc(" + (sourceWidth - parseFloat(calcX)) + "% - 4px)";

          ele.style.left = 0;
        } else if (ele.classList.contains("rightLine")) {
          _this.viewList[$index].creatWidth =
            "calc(" + (sourceWidth + parseFloat(calcX)) + "% - 4px)";

          ele.style.right = 0;
        } else if (ele.classList.contains("topLine")) {
          _this.viewList[$index].creatTop =
            "calc(" + (sourceTop + parseFloat(calcY)) + "% + 2px)";
          _this.viewList[$index].creatHeight =
            "calc(" + (sourceHeight - parseFloat(calcY)) + "% - 4px)";

          ele.style.top = 0;
        } else if (ele.classList.contains("bottomLine")) {
          _this.viewList[$index].creatHeight =
            "calc(" + (sourceHeight + parseFloat(calcY)) + "% - 4px)";

          ele.style.bottom = 0;
        }

        _this.creatEmptyList();

        // _this.$nextTick(function() {
        //   _this.resizeCanvas();

        // });
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    creatEmptyList: function() {
      // 先删除所有为空的数组
      // 循环所有不为空的数组
      // 判断是否有左边为空白位置的
      let _this = this;

      let obj = _this.obj;

      let emptyList = [],
        noEmptyList = [];

      let viewList = _this.viewList;

      let i = 0,
        j = 0;
      // removeEmptyViewList
      // _this.$store.commit("removeEmptyViewList");
      function deleteEmpty() {
        for (i = 0; i < _this.viewList.length; i++) {
          if (_this.viewList[i].isEmpty) {
            _this.$store.commit("removeViewList", i);

            deleteEmpty();
          }
        }
      }

      deleteEmpty();

      let maxLeft = 0,
        CompareLeft = 0,
        maxLeftObj = {},
        maxRight = 0,
        maxRightObj = {},
        maxBottom = 0,
        maxBottomObj = {};
      let maxTop = 0,
        maxTopObj = {};
      let k = 0;
      let outerTopLeft,
        outerBottomLeft,
        innerTopRight,
        innerBottomLeft,
        outerTopRight,
        innerTopLeft,
        innerBottomRight,
        outerBottomRight;
      let stopFor = false;

      loadEmpty("left");

      function loadEmpty(dir, stop) {
        if (dir == "left") {
          // 创建一个变量存储临时添加的数组，因为当前在left循环体内left不需要再被循环
          let loadLeftEmpty = [];
          for (i = 0; i < _this.viewList.length; i++) {
            stopFor = false;
            maxLeft = 0;
            maxLeftObj = {};
            obj = {};

            outerTopLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y: _this.regExpStyle(_this.viewList[i].creatTop)
            };
            outerBottomLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y:
                _this.regExpStyle(_this.viewList[i].creatTop) +
                _this.regExpStyle(_this.viewList[i].creatHeight)
            };

            if (outerTopLeft.x == 0) {
              continue;
              // break;
              //这里需要判断如果为0就不走下边循环了
            } else {
              for (j = 0; j < _this.viewList.length; j++) {
                // 先判断当前左边除了自己以外谁在自己最近的左边
                // 如果没有找到就是左边没有元素，left=0；
                // 也就是自己的最左边left= 10 去找谁的right小于10的并且top > bottom
                innerTopRight = {
                  x:
                    _this.regExpStyle(_this.viewList[j].creatLeft) +
                    _this.regExpStyle(_this.viewList[j].creatWidth),
                  y: _this.regExpStyle(_this.viewList[j].creatTop)
                };
                innerBottomLeft = {
                  x: _this.regExpStyle(_this.viewList[j].creatLeft),
                  y:
                    _this.regExpStyle(_this.viewList[j].creatTop) +
                    _this.regExpStyle(_this.viewList[j].creatHeight)
                };
                if (viewList[j] != viewList[i]) {
                  // if(viewList[j].left < )
                  // 如果外边的left==里边的right，就表示两个盒子左右没有间距， 那么就停止对当前div的循环
                  if (outerTopLeft.x == innerTopRight.x) {
                    if (
                      outerBottomLeft.y > innerTopRight.y &&
                      outerTopLeft.y < innerBottomLeft.y
                    ) {
                      stopFor = true;
                      break;
                    }

                    // 如果外边的left大于里边的right，就证明在其左边，并且外边的bottom大于里边的bottom证明在其上边或者中间
                  } else if (outerTopLeft.x > innerTopRight.x) {
                    // if(&& innerBottomLeft.y > outerTopLeft.y)
                    if (
                      outerBottomLeft.y > innerTopRight.y &&
                      outerTopLeft.y < innerBottomLeft.y
                    ) {
                      // if (outerBottomLeft.y < innerBottomLeft.y || outerBottomLeft.y <= innerBottomLeft.y) {
                      stopFor = false;
                      // 判断找出最靠近当前的左边元素
                      // 如果里边的某一个的right大于变量maxLeft 就把当前变量重新赋值，返回最大值为止
                      if (innerTopRight.x >= maxLeft) {
                        maxLeft = innerTopRight.x;
                        maxLeftObj = _this.viewList[j];
                      }
                    }
                  }
                }
              }
            }
            if (stopFor) {
              continue;
            } else {
              // 遍历出左侧最大的离自己最近的那个的大小做参考
              if (JSON.stringify(maxLeftObj) != "{}") {
                obj = {
                  id: global.uid(),
                  appId: null,
                  productId: null,
                  uid: global.uid(),
                  creatWidth:
                    "calc(" +
                    (outerBottomLeft.x -
                      (_this.regExpStyle(maxLeftObj.creatLeft) +
                        _this.regExpStyle(maxLeftObj.creatWidth))) +
                    "% - 4px)",
                  creatHeight:
                    "calc(" +
                    _this.regExpStyle(_this.viewList[i].creatHeight) +
                    "% - 4px)",
                  creatTop:
                    "calc(" +
                    _this.regExpStyle(_this.viewList[i].creatTop) +
                    "% + 2px)",
                  creatLeft:
                    "calc(" +
                    (_this.regExpStyle(maxLeftObj.creatLeft) +
                      _this.regExpStyle(maxLeftObj.creatWidth)) +
                    "% + 2px)",
                  text: "dragViewItem",
                  isEmpty: true,
                  dir: "left"
                };
                // 判断上边不等于0且没有图形控件时
              } else if (
                JSON.stringify(maxLeftObj) == "{}" &&
                outerBottomLeft.x !== 0
              ) {
                maxLeftObj = {
                  id: global.uid(),
                  appId: null,
                  productId: null,
                  uid: global.uid(),
                  creatWidth: "calc(" + 0 + "% - 4px)",
                  creatHeight: "calc(" + 0 + "% - 4px)",
                  creatTop: "calc(" + 0 + "% + 2px)",
                  creatLeft: "calc(" + 0 + "% + 2px)",
                  text: "dragViewItem",
                  isEmpty: true
                };
                obj = {
                  id: global.uid(),
                  appId: null,
                  productId: null,
                  uid: global.uid(),
                  creatWidth: "calc(" + outerBottomLeft.x + "% - 4px)",
                  creatHeight:
                    "calc(" +
                    _this.regExpStyle(_this.viewList[i].creatHeight) +
                    "% - 4px)",
                  creatTop:
                    "calc(" +
                    _this.regExpStyle(_this.viewList[i].creatTop) +
                    "% + 2px)",
                  creatLeft:
                    "calc(" +
                    (_this.regExpStyle(maxLeftObj.creatLeft) +
                      _this.regExpStyle(maxLeftObj.creatWidth)) +
                    "% + 2px)",
                  text: "dragViewItem",
                  isEmpty: true,
                  dir: "left",
                  option: null
                };
              }
              _this.$store.commit("addViewList", obj);
            }
          }

          if (loadLeftEmpty.length != 0) {
            for (var k = 0; k < loadLeftEmpty.length; k++) {
              // _this.viewList.push(loadLeftEmpty[k]);
              _this.$store.commit("addViewList", loadLeftEmpty[k]);
            }
          }
          if (!stop) {
            loadEmpty("top");
          }
        } else if (dir == "top") {
          let loadTopEmpty = []; //存储临时添加的数组，以免进行无所谓的循环
          for (i = 0; i < _this.viewList.length; i++) {
            stopFor = false;
            maxTop = 0;
            maxTopObj = {};
            obj = {};

            outerTopLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y: _this.regExpStyle(_this.viewList[i].creatTop)
            };
            outerTopRight = {
              x:
                _this.regExpStyle(_this.viewList[i].creatLeft) +
                _this.regExpStyle(_this.viewList[i].creatWidth),
              y: _this.regExpStyle(_this.viewList[i].creatTop)
            };
            outerBottomLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y:
                _this.regExpStyle(_this.viewList[i].creatTop) +
                _this.regExpStyle(_this.viewList[i].creatHeight)
            };
            if (outerTopLeft.y == 0) {
              continue;
            } else {
              for (j = 0; j < _this.viewList.length; j++) {
                innerTopLeft = {
                  x: _this.regExpStyle(_this.viewList[j].creatLeft),
                  y: _this.regExpStyle(_this.viewList[j].creatTop)
                };
                innerBottomLeft = {
                  x: _this.regExpStyle(_this.viewList[j].creatLeft),
                  y:
                    _this.regExpStyle(_this.viewList[j].creatTop) +
                    _this.regExpStyle(_this.viewList[j].creatHeight)
                };
                innerBottomRight = {
                  x:
                    _this.regExpStyle(_this.viewList[j].creatLeft) +
                    _this.regExpStyle(_this.viewList[j].creatWidth),
                  y:
                    _this.regExpStyle(_this.viewList[j].creatTop) +
                    _this.regExpStyle(_this.viewList[j].creatHeight)
                };
                if (_this.viewList[j] != _this.viewList[i]) {
                  //    先判断当前的top跟谁的bottom相等,并且在当前的上边，而不是左边或者右边的上边
                  if (outerTopLeft.y == innerBottomLeft.y) {
                    if (
                      innerBottomRight.x > outerTopLeft.x &&
                      innerTopLeft.x < outerTopRight.x
                    ) {
                      stopFor = true;
                      break;
                    }
                  } else if (outerTopLeft.y > innerBottomLeft.y) {
                    if (
                      innerBottomRight.x > outerTopLeft.x &&
                      innerTopLeft.x < outerTopRight.x
                    ) {
                      stopFor = false;
                      // 判断找出最靠近当前的左边元素
                      // 如果里边的某一个的right大于变量maxLeft 就把当前变量重新赋值，返回最大值为止
                      if (innerBottomLeft.y >= maxTop) {
                        maxTop = innerBottomLeft.y;
                        maxTopObj = _this.viewList[j];
                      }
                    }
                  }
                }
              }
              if (stopFor) {
                continue;
              } else {
                // 遍历出底部最大的离自己最近的那个的大小做参考
                if (JSON.stringify(maxTopObj) != "{}") {
                  obj = {
                    id: global.uid(),
                    appId: null,
                    uid: global.uid(),
                    creatWidth:
                      "calc(" + (outerTopRight.x - outerTopLeft.x) + "% - 4px)",
                    creatHeight:
                      "calc(" +
                      (outerTopLeft.y -
                        (_this.regExpStyle(maxTopObj.creatTop) +
                          _this.regExpStyle(maxTopObj.creatHeight))) +
                      "% - 4px)",
                    creatTop:
                      "calc(" +
                      (_this.regExpStyle(maxTopObj.creatTop) +
                        _this.regExpStyle(maxTopObj.creatHeight)) +
                      "% + 2px)",
                    creatLeft: "calc(" + outerTopLeft.x + "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true,
                    dir: "top"
                  };
                } else if (
                  JSON.stringify(maxTopObj) == "{}" &&
                  outerTopLeft.y !== 0
                ) {
                  maxTopObj = {
                    id: global.uid(),
                    appId: null,
                    uid: global.uid(),
                    creatWidth: "calc(" + 0 + "% - 4px)",
                    creatHeight: "calc(" + 0 + "% - 4px)",
                    creatTop: "calc(" + 0 + "% + 2px)",
                    creatLeft: "calc(" + 0 + "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true
                  };
                  obj = {
                    id: global.uid(),
                    appId: null,
                    productId: null,
                    uid: global.uid(),
                    creatWidth:
                      "calc(" + (outerTopRight.x - outerTopLeft.x) + "% - 4px)",
                    creatHeight:
                      "calc(" +
                      (outerTopLeft.y -
                        (_this.regExpStyle(maxTopObj.creatTop) +
                          _this.regExpStyle(maxTopObj.creatHeight))) +
                      "% - 4px)",
                    creatTop:
                      "calc(" +
                      (_this.regExpStyle(maxTopObj.creatTop) +
                        _this.regExpStyle(maxTopObj.creatHeight)) +
                      "% + 2px)",
                    creatLeft: "calc(" + outerTopLeft.x + "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true,
                    dir: "top",
                    option: null
                  };
                }
                if (JSON.stringify(obj) != "{}") {
                  loadTopEmpty.push(obj);
                }
              }
            }
          }
          if (loadTopEmpty.length != 0) {
            for (var k = 0; k < loadTopEmpty.length; k++) {
              _this.$store.commit("addViewList", loadTopEmpty[k]);
            }
          }
          loadEmpty("right");
        } else if (dir == "right") {
          let loadRightEmpty = [];
          for (i = 0; i < _this.viewList.length; i++) {
            stopFor = false;
            maxRight = 100;
            maxRightObj = {};
            obj = {};

            outerTopLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y: _this.regExpStyle(_this.viewList[i].creatTop)
            };

            outerBottomLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y:
                _this.regExpStyle(_this.viewList[i].creatTop) +
                _this.regExpStyle(_this.viewList[i].creatHeight)
            };
            outerTopRight = {
              x:
                _this.regExpStyle(_this.viewList[i].creatLeft) +
                _this.regExpStyle(_this.viewList[i].creatWidth),
              y: _this.regExpStyle(_this.viewList[i].creatTop)
            };

            if (outerTopRight.x == 100) {
              continue;
            } else {
              for (j = 0; j < _this.viewList.length; j++) {
                innerTopRight = {
                  x:
                    _this.regExpStyle(_this.viewList[j].creatLeft) +
                    _this.regExpStyle(_this.viewList[j].creatWidth),
                  y: _this.regExpStyle(_this.viewList[j].creatTop)
                };
                innerTopLeft = {
                  x: _this.regExpStyle(_this.viewList[j].creatLeft),
                  y: _this.regExpStyle(_this.viewList[j].creatTop)
                };
                innerBottomRight = {
                  x:
                    _this.regExpStyle(_this.viewList[j].creatLeft) +
                    _this.regExpStyle(_this.viewList[j].creatWidth),
                  y:
                    _this.regExpStyle(_this.viewList[j].creatTop) +
                    _this.regExpStyle(_this.viewList[j].creatHeight)
                };

                if (_this.viewList[j] != _this.viewList[i]) {
                  if (outerTopRight.x == innerTopLeft.x) {
                    if (
                      outerBottomLeft.y > innerTopLeft.y &&
                      outerTopLeft.y < innerBottomRight.y
                    ) {
                      stopFor = true;
                      break;
                    }
                  } else if (outerTopRight.x < innerTopLeft.x) {
                    if (
                      outerBottomLeft.y > innerTopLeft.y &&
                      outerTopLeft.y < innerBottomRight.y
                    ) {
                      stopFor = false;
                      if (innerTopLeft.x < maxRight) {
                        maxRight = innerTopLeft.x;
                        maxRightObj = _this.viewList[j];
                      }
                    }
                  }
                }
              }
              if (stopFor) {
                continue;
              } else {
                // 遍历出底部最大的离自己最近的那个的大小做参考
                if (JSON.stringify(maxRightObj) != "{}") {
                  obj = {
                    id: global.uid(),
                    appId: null,
                    productId: null,
                    uid: global.uid(),
                    creatWidth:
                      "calc(" +
                      (_this.regExpStyle(maxRightObj.creatLeft) -
                        outerTopRight.x) +
                      "% - 4px)",
                    creatHeight:
                      "calc(" +
                      (outerBottomLeft.y - outerTopLeft.y) +
                      "% - 4px)",
                    creatTop: "calc(" + outerTopLeft.y + "% + 2px)",
                    creatLeft: "calc(" + outerTopRight.x + "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true,
                    dir: "right"
                  };
                } else if (
                  JSON.stringify(maxRightObj) == "{}" &&
                  outerTopRight.x !== 100
                ) {
                  maxRightObj = {
                    id: global.uid(),
                    appId: null,
                    productId: null,
                    uid: global.uid(),
                    creatWidth: "calc(" + 0 + "% - 4px)",
                    creatHeight: "calc(" + 0 + "% - 4px)",
                    creatTop: "calc(" + 0 + "% + 2px)",
                    creatLeft: "calc(" + 0 + "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true
                  };
                  obj = {
                    id: global.uid(),
                    appId: null,
                    productId: null,
                    uid: global.uid(),
                    creatWidth: "calc(" + (100 - outerTopRight.x) + "% - 4px)",
                    creatHeight:
                      "calc(" +
                      (outerBottomLeft.y - outerTopLeft.y) +
                      "% - 4px)",
                    creatTop: "calc(" + outerTopLeft.y + "% + 2px)",
                    creatLeft: "calc(" + outerTopRight.x + "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true,
                    dir: "right",
                    option: null
                  };
                }
                if (JSON.stringify(obj) != "{}") {
                  loadRightEmpty.push(obj);
                }
              }
            }
          }
          if (loadRightEmpty.length != 0) {
            for (var k = 0; k < loadRightEmpty.length; k++) {
              // _this.viewList.push(loadRightEmpty[k]);
              _this.$store.commit("addViewList", loadRightEmpty[k]);
            }
          }
          loadEmpty("bottom");
        } else if (dir == "bottom") {
          let loadBottomEmpty = [];
          for (i = 0; i < _this.viewList.length; i++) {
            outerTopLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y: _this.regExpStyle(_this.viewList[i].creatTop)
            };

            outerBottomLeft = {
              x: _this.regExpStyle(_this.viewList[i].creatLeft),
              y:
                _this.regExpStyle(_this.viewList[i].creatTop) +
                _this.regExpStyle(_this.viewList[i].creatHeight)
            };

            outerBottomRight = {
              x:
                _this.regExpStyle(_this.viewList[i].creatLeft) +
                _this.regExpStyle(_this.viewList[i].creatWidth),
              y:
                _this.regExpStyle(_this.viewList[i].creatTop) +
                _this.regExpStyle(_this.viewList[i].creatHeight)
            };

            stopFor = false;
            maxBottom = 100;
            maxBottomObj = {};
            obj = {};

            // 判断正好在底部
            if (outerBottomLeft.y == 100) {
              continue;
            } else {
              for (j = 0; j < _this.viewList.length; j++) {
                innerTopLeft = {
                  x: _this.regExpStyle(_this.viewList[j].creatLeft),
                  y: _this.regExpStyle(_this.viewList[j].creatTop)
                };
                innerTopRight = {
                  x:
                    _this.regExpStyle(_this.viewList[j].creatLeft) +
                    _this.regExpStyle(_this.viewList[j].creatWidth),
                  y: _this.regExpStyle(_this.viewList[j].creatTop)
                };
                if (_this.viewList[j] != _this.viewList[i]) {
                  // 先判断某一个的上边等于当前的下边
                  if (outerBottomLeft.y == innerTopLeft.y) {
                    if (
                      outerTopLeft.x < innerTopRight.x &&
                      outerBottomRight.x > innerTopLeft.x
                    ) {
                      stopFor = true;
                      break;
                    }
                  } else if (outerBottomLeft.y < innerTopLeft.y) {
                    if (
                      outerTopLeft.x < innerTopRight.x &&
                      outerBottomRight.x > innerTopLeft.x
                    ) {
                      stopFor = false;
                      if (innerTopLeft.y < maxBottom) {
                        maxBottom = innerTopLeft.y;
                        maxBottomObj = _this.viewList[j];
                      }
                    }
                  }
                }
              }
              if (stopFor) {
                continue;
              } else {
                // 遍历出底部最大的离自己最近的那个的大小做参考
                if (JSON.stringify(maxBottomObj) != "{}") {
                  obj = {
                    id: global.uid(),
                    appId: null,
                    productId: null,
                    uid: global.uid(),
                    creatWidth:
                      "calc(" +
                      _this.regExpStyle(_this.viewList[i].creatWidth) +
                      "% - 4px)",
                    creatHeight:
                      "calc(" +
                      Math.floor(
                        _this.regExpStyle(maxBottomObj.creatTop) -
                          (_this.regExpStyle(_this.viewList[i].creatTop) +
                            _this.regExpStyle(_this.viewList[i].creatHeight))
                      ) +
                      "% - 4px)",
                    creatTop: "calc(" + outerBottomRight.y + "% + 2px)",
                    creatLeft:
                      "calc(" +
                      _this.regExpStyle(_this.viewList[i].creatLeft) +
                      "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true
                  };
                } else if (
                  JSON.stringify(maxBottomObj) == "{}" &&
                  outerBottomLeft.y !== 100
                ) {
                  obj = {
                    id: global.uid(),
                    appId: null,
                    productId: null,
                    uid: global.uid(),
                    creatWidth:
                      "calc(" +
                      _this.regExpStyle(_this.viewList[i].creatWidth) +
                      "% - 4px)",
                    creatHeight:
                      "calc(" + (100 - outerBottomRight.y) + "% - 4px)",
                    creatTop: "calc(" + outerBottomRight.y + "% + 2px)",
                    creatLeft:
                      "calc(" +
                      _this.regExpStyle(_this.viewList[i].creatLeft) +
                      "% + 2px)",
                    text: "dragViewItem",
                    isEmpty: true,
                    dir: "bottom",
                    option: null
                  };
                }
                if (JSON.stringify(obj) != "{}") {
                  loadBottomEmpty.push(obj);
                }
              }
            }
          }
          if (loadBottomEmpty.length != 0) {
            for (var k = 0; k < loadBottomEmpty.length; k++) {
              // _this.viewList.push(loadBottomEmpty[k]);
              _this.$store.commit("addViewList", loadBottomEmpty[k]);
            }
          }
        }
      }
    },
    // 合并相邻相等的空白
    mergeBlank: function() {
      let _this = this;
      let mergeObj = {};

      for (var k = 0; k < _this.viewList.length; k++) {
        let mergeViewList = _this.viewList[k];
        let mergeWidth = _this.regExpStyle(mergeViewList.creatWidth);
        let mergeHeight = _this.regExpStyle(mergeViewList.creatHeight);
        let mergeTop = _this.regExpStyle(mergeViewList.creatTop);
        let mergeLeft = _this.regExpStyle(mergeViewList.creatLeft);

        if (mergeWidth <= 1 || mergeHeight <= 1) {
          if (_this.viewList[k].isEmpty) {
            _this.$store.commit("removeViewList", k);

            continue;
          }
        }

        if (mergeViewList && mergeViewList.isEmpty) {
          for (var i = 0; i < _this.viewList.length; i++) {
            let objCreatList = _this.viewList[i];
            let objCreatWidth = _this.regExpStyle(objCreatList.creatWidth);
            let objCreatHeight = _this.regExpStyle(objCreatList.creatHeight);
            let objCreatTop = _this.regExpStyle(objCreatList.creatTop);
            let objCreatLeft = _this.regExpStyle(objCreatList.creatLeft);

            if (
              objCreatList.uid !== mergeViewList.uid &&
              objCreatList.isEmpty
            ) {
              // 判断下边的空白合并
              // 如果宽度相等left值相同就代表上下一样，可以合并
              if (
                mergeWidth == objCreatWidth &&
                mergeLeft == objCreatLeft &&
                mergeHeight + mergeTop == objCreatTop
              ) {
                mergeObj = {
                  uid: global.uid(),
                  id: null,
                  appId: null,
                  creatWidth: "calc(" + mergeWidth + "% - 4px)",
                  creatHeight:
                    "calc(" + (mergeHeight + objCreatHeight) + "% - 4px)",
                  creatTop: "calc(" + mergeTop + "% + 2px)",
                  creatLeft: "calc(" + mergeLeft + "% + 2px)",
                  isEmpty: true,
                  text: "dragViewItem"
                };
              } else if (
                mergeHeight == objCreatHeight &&
                mergeTop == objCreatTop &&
                mergeLeft + mergeWidth == objCreatLeft
              ) {
                // 判断右边的空白合并
                mergeObj = {
                  uid: global.uid(),
                  id: null,
                  appId: null,
                  creatWidth:
                    "calc(" + (mergeWidth + objCreatWidth) + "% - 4px)",
                  creatHeight: "calc(" + mergeHeight + "% - 4px)",
                  creatTop: "calc(" + mergeTop + "% + 2px)",
                  creatLeft: "calc(" + mergeLeft + "% + 2px)",
                  isEmpty: true,
                  text: "dragViewItem"
                };
              } else if (
                mergeHeight == objCreatHeight &&
                mergeTop == objCreatTop &&
                mergeLeft == objCreatLeft + objCreatWidth
              ) {
                // 判断左边的空白合并
                mergeObj = {
                  uid: global.uid(),
                  id: null,
                  appId: null,
                  creatWidth:
                    "calc(" + (mergeWidth + objCreatWidth) + "% - 4px)",
                  creatHeight: "calc(" + mergeHeight + "% - 4px)",
                  creatTop: "calc(" + mergeTop + "% + 2px)",
                  creatLeft: "calc(" + objCreatLeft + "% + 2px)",
                  isEmpty: true,
                  text: "dragViewItem"
                };
              } else if (
                mergeWidth == objCreatWidth &&
                mergeLeft == objCreatLeft &&
                mergeTop == objCreatTop + objCreatHeight
              ) {
                // 判断上边的空白合并
                mergeObj = {
                  uid: global.uid(),
                  id: null,
                  appId: null,
                  productId: null,
                  creatWidth: "calc(" + mergeWidth + "% - 4px)",
                  creatHeight:
                    "calc(" + (mergeHeight + objCreatHeight) + "% - 4px)",
                  creatTop: "calc(" + objCreatTop + "% + 2px)",
                  creatLeft: "calc(" + mergeLeft + "% + 2px)",
                  isEmpty: true,
                  text: "dragViewItem",
                  option: null
                };
              } else {
                mergeObj = {};
              }

              if (
                JSON.stringify(mergeObj) != "{}" &&
                mergeObj.text != undefined
              ) {
                _this.$store.commit("removeViewList", k);
                _this.$store.commit("removeViewList", i);
                _this.$store.commit("addViewList", mergeObj);

                mergeObj = {};
                continue;
              }
            }
          }
        }
      }
    },
    regExpStyle: function(opt) {
      let partten = /\((.*?)\%/;
      return parseFloat(partten.exec(opt)[1]);
    },

    deleteViewListItem: function($index, id) {
      let _this = this;
      let blankObj = _this.viewList[$index];
      let blankObjWidth = blankObj.creatWidth;
      let blankObjHeight = blankObj.creatHeight;
      let blankObjTop = blankObj.creatTop;
      let blankObjLeft = blankObj.creatLeft;

      let obj = {
        id: global.uid(),
        appId: null,
        uid: global.uid(),
        productId: null,
        creatWidth: blankObjWidth,
        creatHeight: blankObjHeight,
        creatTop: blankObjTop,
        creatLeft: blankObjLeft,
        text: "dragViewItem",
        isEmpty: true,
        option: null
      };

        let ele = document.getElementById(this.viewList[$index].id);

      _this.$store.commit("removeViewEcharts", ele);
      _this.$store.commit('addViewList',obj);
      let deleteAllEmpty = _this.viewList.filter(item => item.isEmpty == false);
      if (deleteAllEmpty.length == 0) {
        _this.viewList.length = 0;
        _this.$store.commit("changeShowState", true);
      }
      console.log(_this.viewList)
      
    },
    getDirection: function(el) {
      let xPos, yPos, offset, dirs;
      dirs = "";
      xPos = window.event.offsetX;
      yPos = window.event.offsetY;
      offset = 8; //设置边缘距离
      if (yPos < offset) dirs += "n";
      else if (yPos > el.offsetHeight - offset) dirs += "s";
      if (xPos < offset) dirs += "w";
      else if (xPos > el.offsetWidth - offset) dirs += "e";
      return dirs;
    },
    getQlik: function(qlikAppId, qlikObjId) {
      var config = {
        host: "139.196.146.101",
        prefix: "/",
        port: 80,
        isSecure: false
      };

      if (window.require) {
        window.require.config({
          baseUrl:
            (config.isSecure ? "https://" : "http://") +
            config.host +
            (config.port ? ":" + config.port : "") +
            config.prefix +
            "resources"
        });
        var qlikApps = [];
        var _Qlik;
        var appId = qlikAppId;
        var objId = qlikObjId;

        window.require(["js/qlik"], function(qlik) {
          _Qlik = qlik;

          qlik.setOnError(function(error) {
            alert(error.message);
          });

          function setSenseObject(appid, objid, eventid, _Qlik) {
            var _app = _Qlik.openApp(appid, config);
            _app.getObject(eventid, objid);
          }

          setSenseObject(appId, objId, objId, qlik);
        });
      }
    },
    loadQlik: function(productId, appId, objectId, i) {
      var getQlikCssLen = document.querySelectorAll("#getQlikCss").length;
      var getQlikScriptLen = document.querySelectorAll("#getQlikScript").length;
      var qlikTicket = "";
      let _Uri = "";
      let _this = this;

      // if (getQlikCssLen == 0 || getQlikScriptLen == 0) {
        //   如果为0就去获取qlik票证加载css和js
        // _Uri = encodeURIComponent(
        //   "http://portal.ebistrategy.com:8030/BigScreen/GetQlikSenseTicket?PorductID=" +
        //     productId
        // );

        // _Uri = encodeURIComponent("http://portal.ebistrategy.com:8030/BigScreen/GetTableauTicket?PorductID=" + productId + '&SiteId=' + qlikAppId);


      //   $ajax.getJson(
      //     _this.api + "/BigScreen/GetQlikSenseTicket?PorductID=" + productId,
      //     {},
      //     function(data) {
      //       qlikTicket = data.data;

      //       let href =
      //         _this.qlikIP +
      //         "resources/autogenerated/qlik-styles.css?qlikTicket=" +
      //         qlikTicket;
      //       let src =
      //         _this.qlikIP + "resources/assets/external/requirejs/require.js";

      //       global.loadJs("getQlikCss", href, "link", function() {
      //         global.loadJs("getQlikScript", src, "script", function() {
      //           // _this.getQlik(appId, objectId);
      //           _this.loadEcharts(objectId, i);
      //         });
      //       });
      //     }
      //   );
      // } else {
        //   如果有的话就直接请求qlik
        // _this.getQlik(appId, objectId);
        _this.loadEcharts(objectId, i);
      // }
    },
    loadViewList: function() {
      let _this = this;

      var id = global.GetQueryString("bigscreenid");

      var listLength = this.viewList.length;

      // http://139.196.146.101:8030/BigScreen/GetBigScreen?id=####
      if (id !== null && listLength == 0) {
        $ajax.getJson(
          this.api + "/BigScreen/GetBigScreen?id=" + id,
          {},
          function success(response) {
            if (response.data.IsSuccess) {
              let list = response.data.Data.Content;

              let base = new Base();
              let decodeList = base.decode(list);

              let BigScreen = decodeURI(decodeList);

              let dataList = JSON.parse(BigScreen);

              let viewList = dataList.bigScreen;

              let title = dataList.title;
              let IP = dataList.IP;

              _this.$store.commit("changeAllViewList", viewList);
              _this.$store.commit("bindTitleColor", title.titleColor);
              _this.$store.commit("bindTitleStyle", title.titleStyle);
              _this.$store.commit("bindTitleSize", title.titleSize);
              _this.$store.commit("bindEditTitle", title.title);
              _this.$store.commit("addQlikHost", IP.qlikIP);
              _this.$store.commit("addTableauHost", IP.tableauIP);
              _this.$store.commit("addEchartsData", dataList.echartsData);
              _this.initEcharts(viewList);
            }
          }
        );
      }

      function Base() {
        // private property
        this._keyStr =
          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
        this.decode = function(input) {
          var output = "",
            chr1,
            chr2,
            chr3,
            enc1,
            enc2,
            enc3,
            enc4,
            i = 0;
          input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
          while (i < input.length) {
            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));
            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
            output = output + String.fromCharCode(chr1);
            if (enc3 != 64) {
              output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
              output = output + String.fromCharCode(chr3);
            }
          }
          output = this._utf8_decode(output);
          return output;
        };
        this.encode = function(input) {
          var output = "",
            chr1,
            chr2,
            chr3,
            enc1,
            enc2,
            enc3,
            enc4,
            i = 0;
          input = this._utf8_encode(input);
          while (i < input.length) {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
            if (isNaN(chr2)) {
              enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
              enc4 = 64;
            }
            output =
              output +
              this._keyStr.charAt(enc1) +
              this._keyStr.charAt(enc2) +
              this._keyStr.charAt(enc3) +
              this._keyStr.charAt(enc4);
          }
          return output;
        };

        // // private method for UTF-8 decoding
        this._utf8_decode = function(utftext) {
          var string = "",
            i = 0,
            c = 0,
            c1 = 0,
            c2 = 0,
            c3 = 0;
          while (i < utftext.length) {
            c = utftext.charCodeAt(i);
            if (c < 128) {
              string += String.fromCharCode(c);
              i++;
            } else if (c > 191 && c < 224) {
              c2 = utftext.charCodeAt(i + 1);
              string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
              i += 2;
            } else {
              c2 = utftext.charCodeAt(i + 1);
              c3 = utftext.charCodeAt(i + 2);
              string += String.fromCharCode(
                ((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)
              );
              i += 3;
            }
          }
          return string;
        };
        this._utf8_encode = function(string) {
          string = string.replace(/\r\n/g, "\n");
          var utftext = "";
          for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
              utftext += String.fromCharCode(c);
            } else if (c > 127 && c < 2048) {
              utftext += String.fromCharCode((c >> 6) | 192);
              utftext += String.fromCharCode((c & 63) | 128);
            } else {
              utftext += String.fromCharCode((c >> 12) | 224);
              utftext += String.fromCharCode(((c >> 6) & 63) | 128);
              utftext += String.fromCharCode((c & 63) | 128);
            }
          }
          return utftext;
        };
      }
    },
    // 加载echarts图形
    loadEcharts: function(eleId,optionIndex) {
      var _this = this;
      $ajax.getJson("../../static/echartsKpi.json", {}, function(data) {
        if (data.status == 200) {
          let ele = document.getElementById(eleId);
          let myCharts = echarts.init(ele);

          // 对echarts实例填充option数据
          // 
          _this.$store.commit('getLoadEchartsData', data.data.echartsOption)
          // loadEchartsData: state => state.loadEchartsData
          console.log(_this.viewList[optionIndex].isEmpty)
          if(_this.viewList[optionIndex].isEmpty == false){
            _this.echartsOption = _this.loadEchartsData[optionIndex];
            myCharts.setOption(_this.echartsOption);
          
            //将echarts实例放入实例数组中 
            _this.echartsObj.push(myCharts);
          }
          
        }
      });
      window.onresize = function(){
        // 遍历实例数组，并对每一个echarts对象进行resize操作
        if(_this.echartsObj.length != 0){
          for(let i in _this.echartsObj){
            _this.echartsObj[i].resize();
          }
        }
      }
      
    },
    initEcharts: function() {
      this.$nextTick(function() {
        for (var i = 0; i < this.viewList.length; i++) {
          if (!this.viewList[i].isEmpty) {
            let list = this.viewList[i];

            if (list.type == "qlik") {
              this.loadQlik(list.productId, list.appId, list.id, i);
              // this.loadEcharts(list.id, i);
            }
          }
        }
      });
    },
    selectedChart: function(id){
      // editIndexId
     
    }
  },
  computed: {
    //        route () {
    //     get: {
    //       return this.$store.state.curTab.route
    //     },
    //     set:(newValue) {
    //       this.$store.state.curTab.route = newValue
    //     }
    //   },
    localComputed() {
      /* ... */
    },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      // ...
      viewList: state => state.viewList,
      borderActive: state => state.borderActive,
      maskStyle: state => state.maskStyle,
      showState: state => state.showState,
      viewIframeSrc: state => state.viewIframeSrc,
      qlikIP: state => state.qlikData.ServerDomainName,
      KpiIndex: state => state.kpiIndex,
      editIndexId: state => state.editIndexId,
      loadEchartsData: state => state.loadEchartsData
    })
  },
  created() {},
  updated() {},
  mounted() {
    if (this.viewList.length == 0) {
      this.loadViewList();
    } else {
      this.initEcharts(this.viewList);
    }
  }
};
</script>

<style>
.content-popup {
  position: absolute;
  z-index: 990;
}

.isEmpty {
  z-index: 980;
}

.content-menu.empty {
  border: none;
}
</style>